<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <style>
    ul {}
  </style>
  <link rel="stylesheet" href="./myswiper.css">
</head>

<body>
  <div class="box">
    <ul class="item">
      <li style="opacity: 1"><img src="images/1.jpg" /></li>
      <li><img src="images/2.jpg" /></li>
      <li><img src="images/3.jpg" /></li>
      <li><img src="images/4.jpg" /></li>
      <li><img src="images/5.jpg" /></li>
    </ul>
    <button class="leftBtn">&lt;</button>
    <button class="rightBtn">&gt;</button>

    <ul class="page">
      <li style="background-color: white">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>

  <script src="./myswiper.js"></script>
  <script>

    /*
           思路：
              选型卡 
              1-记录当前的 页码 index
              2-  
                给下面的小点  加点击事件（移入）    
                  让当前的图片显示 隐藏  ，当前显示小点 变红
                  小点的下标对应的 图片 显示  对应的小点 变白   
                index = i

              3-左右按钮  
                 右按钮 点击事件      让当前的图片显示 隐藏  ，当前显示小点 变红  
                  index++  
                  小点的下标对应的 图片 显示  对应的小点 变白 
              4- 自动播放  
                 定时器  调用 this.rightBtn.onclick（）  
                 移入 移出      
      */

    /* 
        选项卡--封装面向对象 构造函数

         1- 把原来定义的 全局变成 构造函数的属性
         2- 把原来写的 一个一个功能-改成函数--成为构造函数的方法

         ps： 事件内使用this 指的是 添加的事件的元素 
              在事件内部想要使用 构造函数创建的对象的，需要把事件处理函数改成 箭头函数
                让事件处理函数没有自己的this，跟外部环境（上下文）保持一致
    
    
    */




    let sw = new MySwiper('.box', {
      autoplay: true
    })




    // 3-翻页 

    // 下一页





  </script>
</body>

</html>